import CodeShow from './CodeShow.vue'
import { codeTextFnJsx } from './codetext'
import './jsxcss.css'

const HelloWorldFnJsx = (props, { emit }) => {
  // 移除响应式状态，改为从 props 接收
  const { msg, count = 0 } = props
  
  // 事件处理函数
  const handleIncrement = () => {
    emit('increment')
  }

  return (
    <>
      <h2 class="title">{msg}</h2>
      <button type="button" onClick={handleIncrement}>count is {count}</button>
      <CodeShow codeText={codeTextFnJsx} />
    </>
  )
}

// 定义组件属性
HelloWorldFnJsx.props = {
  msg: String,
  count: {
    type: Number,
    default: 0
  }
}

// 定义组件发出的事件
HelloWorldFnJsx.emits = ['increment']

export default HelloWorldFnJsx